import React, { useState, useEffect, useRef } from 'react'
import { Icon, Pull } from 'zarm'
import dayjs from 'dayjs'
import BillItem from '@/components/BillItem'
import { get, REFRESH_STATE, LOAD_STATE } from '@/utils' // Pull 组件需要的一些常量
import PopupType from '@/components/PopupType'
import CustomIcon from '@/components/CustomIcon'
import PopupDate from '@/components/PopupDate'
import PopupAdd from '@/components/PopupAdd'

import s from './style.module.less'

const Home = () => {
  const [currentSelect, setCurrentSelect] = useState({})//当前选中的类型
  // 时间轮选框，使用dayjs轮子
  const [currentTime, setCurrentTime] = useState(dayjs().format('YYYY-MM')); // 当前筛选时间
  const [page, setPage] = useState(1); // 分页
  const [list, setList] = useState([]); // 账单列表
  const [totalPage, setTotalPage] = useState(0); // 分页总数
  const [refreshing, setRefreshing] = useState(REFRESH_STATE.normal); // 下拉刷新状态
  const [loading, setLoading] = useState(LOAD_STATE.normal); // 上拉加载状态
  const [total, setTotal] = useState({}) //设置首页的总计功能


  // 这俩是实现父子组件通信的标记
  const typeRef = useRef()
  const monthRef = useRef()
  const addRef = useRef()

  useEffect(() => {
    getBillList() // 初始化
  }, [page, currentSelect, currentTime])

  // 获取账单方法
  const getBillList = async () => {

    // 向这个端口发送请求，并在路径上就携带好参数   分别为：请求分页数、请求筛选时间、请求选择类型
    const { data } = await get(`/api/bill/list?page=${page}&page_size=5&date=${currentTime}&type_id=${currentSelect.id || 'all'}`);
    console.log('这里是首页拿到的账单的数据组成', data);
    // 设置总计支出和总计收入
    setTotal({
      totalExpense: data.totalExpense,
      totalIncome: data.totalIncome
    })



    // 下拉刷新，重制数据
    if (page == 1) {
      // 说明一页能展示，直接设置到数据源中去
      setList(data.list);
    } else {
      // 拼接数据到数据源里去
      setList(list.concat(data.list));
    }

    // UI框架提供的方法
    setTotalPage(data.totalPage);
    // 上滑加载状态
    setLoading(LOAD_STATE.success);
    setRefreshing(REFRESH_STATE.success);
  }

  // 请求列表数据
  const refreshData = () => {
    setRefreshing(REFRESH_STATE.loading);
    if (page != 1) {
      setPage(1);
    } else {
      // 发送接口请求
      getBillList();
    };
  };

  const loadData = () => {
    if (page < totalPage) {
      setLoading(LOAD_STATE.loading);
      setPage(page + 1);
    }
  }



  // 筛选账单类型
  const toggle = () => {
    // 通过ref获取到当前子组件内部的状态，可以将子组件内的show状态拿出来调用
    typeRef.current && typeRef.current.show()
  }


  // 通过时间筛选
  const monthToggle = () => {
    monthRef.current && monthRef.current.show()



  }




  // 添加账单
  const togole = () => {
    //看看能不能直接取到popupType里面的内容
    // ref 语法，接current拿到里面的值
    console.log('Add',addRef.current);
    // 通过ref获取到当前子组件内部的状态，可以将子组件内的show状态拿出来调用
    addRef.current && addRef.current.show()
  }


  // 筛选类型 //用来传给子组件用的
  const select = (item) => {
    console.log('根据父组件给的onSelect,子组件回传数据。这里是父组件，打印回传数据:', item);
    setCurrentSelect(item)

    // 请求当前类型的数据的账单
    // 本来应该在这个地方调用上面的 getBillList 去发起接口请求，请求账单信息
    // 但是我们可以直接想办法，触发 getBillList 就好了，而我们在 useEffect 里面已经调用了它
    // 那么我们直接想办法触发 useEffect 就好了，直接在 useEffect 后面加上本段想要变更的属性 currentSelect 



  }




  // 这里是时间弹出框的执行函数。当子组件选中某个时间的时候，选中它，执行这个函数
  const selectMonth = (item) => {
    // item 表示选中的日期
    console.log(item);
    // 设置当前时间
    setCurrentTime(item)



  }


  // 添加账单的组件返回
  const addItem = ()=>{
    console.log('添加账单的组件返回');
    // 成功添加账单，重新渲染首页
    getBillList()
  }


  return <div className={s.home}>
    <div className={s.header}>
      <div className={s.dataWrap}>
        <span className={s.expense}>总支出：<b>¥ {total.totalExpense}</b></span>
        <span className={s.income}>总收入：<b>¥ {total.totalIncome}</b></span>
      </div>
      <div className={s.typeWrap}>
        <div className={s.left} onClick={toggle}>
          <span className={s.title}>{currentSelect.name || '类型'} <Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
        <div className={s.right}>
          {/* 时间选择框 */}
          <span onClick={monthToggle} className={s.time}>{currentTime}<Icon className={s.arrow} type="arrow-bottom" /></span>
        </div>
      </div>
    </div>
    {/* list 里面存在元素，就下拉刷新 pull */}
    <div className={s.contentWrap}>
      {
        list.length ? <Pull
          animationDuration={200}
          stayTime={400}
          refresh={{
            state: refreshing,
            handler: refreshData
          }}
          load={{
            state: loading,
            distance: 200,
            handler: loadData
          }}
        >
          {
            list.map((item, index) => <BillItem
              bill={item}
              key={index}
            />)
          }
        </Pull> : null
      }
    </div>
    {/* 添加的图标， */}
    {/* 添加账单选项框 */}
    <div className={s.add} onClick={togole}>
      <CustomIcon type='tianjia'></CustomIcon>
    </div>


    {/* 这是类型选择弹出框 */}
    {/* 打上标签，获取到子组件的内容注意向子组件传递状态 */}
    {/* 给子组件传递一个函数select */}
    <PopupType ref={typeRef} onSelect={select}>

    </PopupType>

    {/* 时间弹出框 */}
    {/* 打上标记ref，实现父子件与子组件通信 */}
    <PopupDate ref={monthRef} mode="month" onSelect={selectMonth}></PopupDate>


    {/* 账单添加页 */}
    {/* 打上标记ref，实现父子组件通信 */}
    <PopupAdd ref={addRef} onSelect={addItem} ></PopupAdd>
  </div>
}

export default Home

